<template>
    <div v-if="visible" class="expire-container">
        <div class="content-box">
            <div class="close pointer" @click="handleCancel">
                <img src="../assets/closetwo.png" class="icon-close" alt="">
            </div>
            <div class="head">
                <div class="fs-18 bold text-center mg-b-20">发薪专户到期提醒</div>
            </div>
            <div class="content">
                <div v-if="type=== 'willExpire'" class="fc-lightgrey text-center">
                    您的发薪专户权益将于<span class="fc-black">{{ date }} 23:59分到期，</span>届时您的发薪权益将会受限，是否续费？
                </div>
                <div v-if="type=== 'expired'" class="fc-lightgrey text-center">
                    您的发薪专户<span class="fc-black">已到期</span>，续费后可继续享受发薪权限，是否续费？
                </div>
                <div class="button-list flex flex-jc-sb mg-t-20 text-center">
                    <div class="btn" @click="handleCancel">忽略</div>
                    <div class="btn success" @click="handleShowDialog" type="success">去续费</div>
                </div>
            </div>
        </div>
        <dialogRecharge v-model:show="showDialog" @refresh="handleCancel"/>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import dialogRecharge from '@/components/seat/dialog-recharge.vue';
export default defineComponent({
    props: {
        type: {
            type: String,
            default: 'willExpire'
        },
        show: {
            type: Boolean,
            default: false
        },
        date: {
            type: String,
            default: ''
        }
    },
    components: {
        dialogRecharge
    },
    data() {
        return {
            visible: false,
            showDialog: false
        }
    },
    watch: {
        show(newval) {
            this.visible = newval
        },
        visible(newval) {
            this.$emit('update:show', newval)
        }
    },
    methods: {
        handleCancel() {
            sessionStorage.setItem('closeExpireDialog', 'true')
            this.visible = false
        },
        handleShowDialog() {
            this.showDialog = true
        },
    }
})

</script>
<style lang="stylus" scoped>
.expire-container
    position fixed
    left 0
    top 0
    width 100%
    height 100%
    background rgba(0,0,0,0.5)
    z-index 100
.content-box
    width 310px
    height 380px
    background url('../assets/recharge/icon-recharge.png') no-repeat
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    padding: 35px
    border-radius 10px
.head
    margin-top 160px
.fc-lightgrey
    color #707284
.fc-black
    color #202536
.text-center
    text-align center
.btn
    width 112px
    height 32px
    line-height 32px
    text-align center
    border-radius 16px
    background #fff
    border 1px solid #E8E9EA
    color #9497B1
.success
    color #fff
    background #00D679
    border-color #00D679
.icon-close
    width 36px
    height 36px
    position absolute
    right 0
    top -50px
</style>